<template>
  <div class="base">
    <!-- 注册登录界面 -->
    <div  class="loginAndRegist">
      <!--登录表单-->
      <el-form :rules="rules" :model="loginUser" ref="loginUser" v-loading="loading1"
               element-loading-text="正在登陆，请稍后"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
        <div  class="loginArea">
          <transition
              name="animate__animated animate__bounce"
              enter-active-class="animate__fadeInUp"
              leave-active-class="animate__zoomOut"
              appear
          >
            <!-- 标语 -->
            <div v-show="isShow" class="title">
              登录
            </div>
          </transition>
          <transition
              name="animate__animated animate__bounce"
              enter-active-class="animate__fadeInUp"
              leave-active-class="animate__zoomOut"
              appear
          >
            <!-- 密码框和用户名框 -->
            <div v-show="isShow" class="pwdArea">
              <div style="flex: 1;justify-content: center;display: flex;align-items: center">
                <el-form-item prop="username">
                  <el-input class="username" clearable prefix-icon="el-icon-user" v-model="loginUser.username" style="width: 165px"  placeholder="用户名"></el-input>
                </el-form-item>
              </div>
              <div style="flex: 1;justify-content: center;display: flex;align-items: center">
                <el-form-item prop="password">
                  <el-input placeholder="密码" prefix-icon="el-icon-lock"  v-model="loginUser.password" style="width: 165px" show-password></el-input>
                </el-form-item>
              </div>
            </div>
          </transition>
          <transition
              name="animate__animated animate__bounce"
              enter-active-class="animate__fadeInUp"
              leave-active-class="animate__zoomOut"
              appear
          >
            <!-- 登录注册按钮 -->
            <div v-show="isShow" class="btnArea">
              <el-button type="success" round style="background-color: #257B5E;letter-spacing: 5px" @click="UserLogin" autocomplete="off">登录</el-button>
            </div>
          </transition>
        </div>
      </el-form>
      <!-- 注册表单 -->
      <el-form :rules="rules" :model="regUser" ref="regUser" v-loading="loading2"
               element-loading-text="正在注册，请稍后"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="registArea">
          <transition
              name="animate__animated animate__bounce"
              enter-active-class="animate__fadeInUp"
              leave-active-class="animate__zoomOut"
              appear
          >
            <!-- 注册表头-->
            <div v-show="!isShow" class="rigestTitle">
              注册
            </div>
          </transition>
          <transition
              name="animate__animated animate__bounce"
              enter-active-class="animate__fadeInUp"
              leave-active-class="animate__zoomOut"
              appear
          >
            <!--注册表单-->
            <div  v-show="!isShow" class="registForm">
                <div style="flex: 1;display: flex;justify-content: center;align-items: center">
                  <el-form-item prop="username">
                    <el-input
                        placeholder="请输入用户名"
                        v-model="regUser.username"
                        style="width: 165px;margin-left: 10px"
                        clearable
                        prefix-icon="el-icon-user"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              <div style="flex: 1;display: flex;justify-content: center;align-items: center">
                <el-form-item prop="password">
                  <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" style="width: 165px;margin-left: 10px" v-model="regUser.password" show-password></el-input>
                </el-form-item>
              </div>
              <div style="flex: 1;display: flex;justify-content: center;align-items: center;">
                <el-form-item prop="regPassword">
                  <el-input placeholder="请再次输入密码" prefix-icon="el-icon-lock" style="width: 165px;margin-left: 10px" v-model="regUser.regPassword" show-password></el-input>
                </el-form-item>
              </div>
            </div>
          </transition>
          <transition
              name="animate__animated animate__bounce"
              enter-active-class="animate__fadeInUp"
              leave-active-class="animate__zoomOut"
              appear
          >
            <!--注册按钮-->
            <div  v-show="!isShow" class="registBtn">
              <el-button type="success" round style="background-color: #257B5E;letter-spacing: 5px" @click="userRegister">注册</el-button>
            </div>
          </transition>
        </div>
      </el-form>

      <!-- 信息展示界面 -->
      <div id="aaa" class="showInfo"
           :style="{
             borderTopRightRadius:styleObj.bordertoprightradius,
             borderBottomRightRadius:styleObj.borderbottomrightradius,
             borderTopLeftRadius:styleObj.bordertopleftradius,
             borderBottomLeftRadius:styleObj.borderbottomleftradius,
             right:styleObj.rightDis
            }"
           ref="showInfoView">

        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 没有用户输入用户名或者找不到用户名的时候 -->
          <div v-show="isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
            <!-- 欢迎语 -->
            <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
              欢迎登入医院管理系统
            </div>
            <!-- 欢迎图片 -->
            <div style="flex: 2">
              <el-button type="success"  style="background-color:#257B5E;border: 1px solid #ffffff;" round @click="changeToRegiest">还没有账户？点击注册</el-button>
            </div>
          </div>
        </transition>
        <!-- 用户输入用户名时展示头像以及姓名 -->
        <transition
            name="animate__animated animate__bounce"
            enter-active-class="animate__fadeInUp"
            leave-active-class="animate__zoomOut"
            appear
        >
          <!-- 用户注册的时候展示信息 -->
          <div v-show="!isShow" style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;height: 100%">
            <!-- 欢迎语 -->
            <div style="flex: 2;display: flex;align-items: center;font-size: 22px;color: #FFFFFF;font-weight: bold">
              欢迎注册
            </div>
            <!-- 欢迎图片 -->
            <div style="flex: 2">
              <el-button type="success"  style="background-color:#257B5E;border: 1px solid #ffffff;" round @click="changeToLogin">已有账户？点击登录</el-button>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
  import 'animate.css';
  export default {
    name:'Login',
    data(){
      return{
        loading1: false,
        loading2: false,
        // 看看用不用转成用户对象
        loginUser:{
          username:"",
          password:""
        },
        // 看看用不用转成用户对象
        regUser:{
          username:'',
          password:'',
        },
        // 校验规则
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 6, message: '用户名必须在 3 到 6 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, message: '密码不能少于 6 个字符', trigger: 'blur' }
          ],
          regPassword: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            { min: 6, message: '密码不能少于 6 个字符', trigger: 'blur' }
          ],
        },
        styleObj:{
          bordertoprightradius:'15px',
          borderbottomrightradius: '15px',
          bordertopleftradius:'0px',
          borderbottomleftradius:'0px',
          rightDis:'0px'
        },
        isShow:true
      }
    },
    methods:{
      changeToRegiest(){
        this.styleObj.bordertoprightradius= '0px'
        this.styleObj.borderbottomrightradius='0px'
        this.styleObj.bordertopleftradius='15px'
        this.styleObj.borderbottomleftradius='15px'
        this.styleObj.rightDis='50%'
        this.isShow = !this.isShow
      },
      changeToLogin(){
        this.styleObj.bordertoprightradius= '15px'
        this.styleObj.borderbottomrightradius='15px'
        this.styleObj.bordertopleftradius='0px'
        this.styleObj.borderbottomleftradius='0px'
        this.styleObj.rightDis='0px'
        this.isShow = !this.isShow
      },
      //用户登录
      UserLogin(){
        this.$refs['loginUser'].validate((valid) => {
          if (valid) {
            this.loading1 = true
            setTimeout(() => {
              this.loading1 = false
              this.request.post("/user/login", this.loginUser).then(res => {
                if(res.code === '200') {
                  this.$router.push("/manage")
                  this.$message.success(`登录成功，欢迎您 ${this.loginUser.username}`)
                  localStorage.setItem("user", JSON.stringify(res.data)) // 将数据存放到本地浏览器中
                } else {
                  this.$message.error(res.msg)
                }
              })
            }, 800)
          } else {
            this.$message.error("请输入用户名和密码！！！")
            return false;
          }
        });
      },
      //用户注册
      userRegister(){
        this.$refs['regUser'].validate((valid) => {
            if (valid) {
              this.loading2 = true
              setTimeout(() => {
                this.loading2 = false
                if(this.regUser.password !== this.regUser.regPassword) {
                  this.$message.error("密码不一致")
                } else {
                  // 密码一致
                  this.request.post("/user/add", this.regUser).then(res => {
                    if(res.code === '200') {
                      this.$message.success("注册成功")
                      location.reload();
                    } else {
                      this.$message.error("用户已存在，请重新注册")
                    }
                  })
                }
              }, 800)
            } else {
              this.$message.error("请先完善信息！！！")
              return false;
            }
        });
      }
    },
  }
</script>

<style>
.base{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/images/background.png");
  background-size: 100%;
}
.el-form-item--mini .el-form-item__error {
  padding-top: 5px;
  padding-left: 10px;
}
.loginAndRegist{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.loginArea{
  background-color: rgba(255,255,255,0.8);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  height: 400px;
  width: 350px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.registArea{
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
  width: 350px;
  background-color: rgba(255,255,255,0.8);
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content:center ;
  align-items: center;
}
.showInfo{
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  position: absolute;
  height: 400px;
  width: 350px;
  z-index:2;
  top: 0;
  right: 0;
  background-image: url("../assets/images/welcome.png");
  background-size: 90%;
}
.showInfo:hover{
  background-size: 100%;
  background-position: -50px -50px;
}
.title{
  width: 70%;
  flex:1;
  border-bottom: 1px solid #257B5E;
  display: flex;
  align-items: center;
  color: #257B5E;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
}
#aaa{
  transition: 0.3s linear;
}
.pwdArea{
  width: 100%;
  flex:2;
  display: flex;
  flex-direction: column;
  display: flex;
  flex-direction: column;
}
.pwdArea input{
  outline: none;
  height: 30%;
  border-radius:13px ;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}
.pwdArea input:focus{
  border: 2px solid #257B5E;
}
.btnArea{
  flex:1;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.rigestTitle{
  width: 70%;
  flex: 1;
  color: #257B5E;
  font-weight: bold;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #257B5E;
}
.registForm{
  flex: 3;
  display: flex;
  flex-direction: column;
  color: #257B5E;
  font-size: 16px;
}
.registForm input{
  outline: none;
  height: 30%;
  border-radius:13px ;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}
.registForm input:focus{
  border: 2px solid #257B5E;
}
.registBtn{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>